<template>
  <!-- 开放  封闭原则 -->
  <div 
    class="divider" 
    :class="[contentPosition,dashed?'dash':'']"
    :style="{borderTopColor:color}"
  >
    <div class="title" :style="{color:color}">
      <slot>
        <span>文本</span>
      </slot>
    </div>
  </div>
</template>

<script>
  // 开放功能的方式：
  // props：用于传数据（字符串、布尔值、数字、JSON）
  // 插槽：用于传结构
  // $emit：传递事件
  export default {
    // 接收组件prop参数
    props: {
      contentPosition: {  //控制文本位置
        type: String,
        default: ''
      },
      // 1. 控制是否虚线
      dashed:{
        type:Boolean,
        default:false
      },
      // 2. 控制线条颜色
      color:{
        type:String,
        default:'#333'
      }
    },
  }
</script>

<style lang="scss" scoped>
.divider {
  border-top: 1px solid #333;
  height: 0;
  margin: 20px;
  padding: 0 100px;
  .title{
    /* color: orange; */
    transform: translateY(-55%);
    background-color: #fff;
    display: inline-block;
    padding: 0 30px;
  }
}
.divider.center{
  text-align: center;
}
.divider.right{
  text-align: right;
}
.divider.dash{
  border-top-style: dashed;
}

</style>